
<template>
  <div class="share-box content-box" v-wechat-title="$route.meta.title">
    <div class="header">
      <div class="header_top">
        <div class="touxiang">
          <img :src="headimgurl" alt="">
        </div>
        <div class="name">
          <div class="name_top">
            <p class="name_p1">{{nickname}}</p>
            <div v-if="!bmstatus" class="name_status">
              <p class="name_p2"></p>
              未报名
            </div>
            <div v-if="bmstatus" class="name_status2">
              <p class="name_p3"></p>
              <img src="../../assets/share/ybm.png" alt="">
              <span>已报名</span>
            </div>
          </div>
        </div>
      </div>

      <div class="header_bottom">
        <div class="header_bottom_left">{{huodongtitle}}</div>
        <!--<div class="header_bottom_right" @click="handleappclick"><svg t="1585670768174" class="icon qiehuan" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268"><path d="M830.4 457.9H193.6c-26.5 0-48-21.5-48-48s21.5-48 48-48h636.8c26.5 0 48 21.5 48 48s-21.5 48-48 48z" fill="#ffffff" p-id="2269"></path><path d="M193.6 457.9c-12.3 0-24.6-4.7-33.9-14.1-18.8-18.8-18.8-49.1 0-67.9L339.6 196c18.8-18.8 49.1-18.8 67.9 0s18.8 49.1 0 67.9l-180 180c-9.3 9.4-21.6 14-33.9 14zM830.4 662.1H193.6c-26.5 0-48-21.5-48-48s21.5-48 48-48h636.8c26.5 0 48 21.5 48 48s-21.5 48-48 48z" fill="#ffffff" p-id="2270"></path><path d="M650.5 841.9c-12.3 0-24.6-4.7-33.9-14.1-18.8-18.8-18.8-49.2 0-67.9L796.5 580c18.8-18.8 49.1-18.8 67.9 0s18.8 49.2 0 67.9l-180 180c-9.4 9.4-21.6 14-33.9 14z" fill="#ffffff" p-id="2271"></path></svg>-->
        <!--切换活动</div>-->
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <div class="title">
          <img class="title_icon" src="../../assets/imgs/my_order.png" alt="">
          <span class="title_h">我的订单</span>
        </div>
        <div class="listdata" v-if="shangpindata.length>0">
          <div v-for="(obj, i) in shangpindata" :key="i" class="listitem">
            <img class="listitem_img" border=0 :src="obj.img" alt="">
            <div class="listitem_content">
              <div class="listitemtop">
                <span class="listitem_title">{{obj.title}}</span>
                <span class="listitem_price">{{obj.amount}}元</span>
              </div>
              <p class="listitem_status">订单状态: {{obj.payment_status}}</p>
              <p class="listitem_time">支付时间：{{obj.payment_time}}</p>
            </div>
          </div>
        </div>
        <div class="error" v-else>
          <img class="error_img" src="../../assets/share/order_error.png" alt="">
          <p class="error_title">暂无订单</p>
        </div>
      </div>
    </div>
    <!-- 申请合作的二维码 -->
    <!-- <mt-popup
      v-model="popupVisiblecode"
      popup-transition="popup-fade">
      <div class="code">
        <div class="img_box">
          <img class="img" src="../../assets/hezuo/parter.png" alt="">
        </div>
        <p class="code_p1">
          <span class="icon"></span>
          <span>申请合作</span>
        </p>
        <p>长按识别二维码加好友</p>
        <span class="close" @click="close"></span>
      </div>
    </mt-popup> -->
    <!-- <div class="footer_title">
      F+智选 提供系统支持，商务合作请联系 <span class="footer_right"></span>
    </div> -->
    <!-- 活动选择的 -->
    <mt-popup
      v-model="popupVisiblehuodong"
      popup-transition="popup-fade"
      position="bottom">
      <p class="mulu_close" @click="close"></p>
      <ul class="huodongbox">
        <li class="addList" v-for="(item,k) in huodongdata" @click="getProvinceId(item, index)" :key='k'>{{ item.name }}</li>
      </ul>
    </mt-popup>
    <wx/>
  </div>
</template>

<script>
import wx from '../wx'
import { getAllApp, getInfo, getPayment } from 'api/member'
export default {
  components: { wx },
  inject: [ 'reload' ],
  data () {
    return {
      bmstatus: false, // 报名的状态
      nickname: NaN,
      headimgurl: NaN,
      tittle: '我的',
      num: 0,
      popupVisiblecode: false, // 申请合作的弹窗控制
      popupVisiblehaibao: false, // 去分享海报
      popupVisiblehuodong: false, // 活动遮罩层,
      huodongtitle: '', // 活动的名称
      huodongdata: [],
      shangpindata: [] // 商品订单列表
    }
  },
  created() {
    var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    this.nickname = user['nickname']
    this.headimgurl = user['headimgurl']
    if (user['is_register'] === '1' || user['is_register'] === 1) {
      // 报名状态
      this.bmstatus = true
    }
    // this.bonus() // 获取个人奖励
    this.getPayment()
    this.getAllApp() // 获取该成员的所有参与项目
  },
  methods: {
    // 获取订单列表
    getPayment() {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      let param = {
        app_id: user['app_id']
      }
      getPayment(param).then((response) => {
        if (response.code === 0) {
          this.shangpindata = response.data
        } else {
          this.$toast(response.info)
        }
      })
    },
    getAllApp () {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      var param = { 'app_id': user['app_id'] }
      getAllApp(param).then(response => {
        this.huodongdata = response.data
        for (var j = 0, len = this.huodongdata.length; j < len; j++) {
          var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
          if ((user['app_id'] + '') === (this.huodongdata[j]['id'] + '')) {
            this.huodongtitle = this.huodongdata[j]['name']
            break
          }
        }
      })
    },
    // 点击切换活动
    handleappclick () {
      this.popupVisiblehuodong = true
    },
    // 关闭活动
    close () {
      this.popupVisiblehuodong = false
    },
    // 点击活动选择
    getProvinceId (value, index) {
      var user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
      if (value.id !== user['app_id']) {
        getInfo({'app_id': value.id}).then(response => {
          if (response.code !== 0) {
            this.$toast(response.info || response.info || '切换失败')
          } else {
            var data = response.data
            user.nickname = data.nickname || '' // 当前用户的昵称
            user.headimgurl = data.headimgurl || '' // 当前用户的头像
            user.app_id = data.app_id || ''
            user.app_name = data.app_name || ''
            user.id = data.id || 0 // 当前用户的ID当为种子用户时为0
            user.user_id = data.user_id || 0 // 当前用户的ID当为种子用户时为0
            user.is_register = data.is_register + '' // 当为普通用户时才有,1为已报名 0为未报名
            user.token = data.token || ''
            user.inviter_id = data.inviter_id || 0 // 邀请人ID
            user.inviter_name = data.inviter_name || 0 // 邀请人姓名
            user.storage_id = data.storage_id || 0 // 报名用户ID
            localStorage.setItem('user', JSON.stringify(user))
            this.reload()
          }
        }).catch((err) => {
          console.log(err)
        })
      }
      this.popupVisiblehuodong = false
      this.huodongtitle = value.name
      this.$toast('你已切换成: ' + value.name)
    }
  },
  // components: {
  //   commonHeader
  // },
  computed: {
    // ...mapGetters([
    //   'number'
    // ]),
    // ...mapState({
    //   number: state => state.home.number
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.share-box{
  background: #FFF;
  position: relative;
  .header{
    width: 100%;
    .h(360);
    overflow: hidden;
    background: url("../../assets/share/share_bg.png");
    background-size: 100%;
    // background:linear-gradient(90deg,rgba(254,131,115,1) 0%,rgba(253,112,110,1) 100%);
    .header_top{
      display: flex;
      justify-content: flex-start;
      align-items: start;
      .mt(40);
      .ml(46);
      .mr(30);
      .h(120);
      .touxiang{
        .w(120);
        .h(120);
        .mr(28);
        background: #ccc;
        .b-radius(60);
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .name{
        .w(348);
        .h(120);
        .lh(120);
        display: flex;
        align-items: center;
        .name_top{
          display: flex;
          align-items: center;
          // justify-content: space-between;
          // .w(248);
          .mt(14);
        }
        .name_bottom{
          .mt(30);
          .lh(28);
          font-weight: 400;
          .fs(26);
          .h(28);
          text-align: left;
          color:rgba(255,255,255,1);
          font-family:PingFangSC-Regular,PingFang SC;
        }
        .name_p1{
          .h(40);
          .fs(40);
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,255,255,1);
          .lh(40);
          .maxw(200);
          letter-spacing:2px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .name_status{
          position: relative;
          .w(104);
          .h(40);
          .fs(22);
          text-align: center;
          .lh(40);
          .ml(20);
          color: #FFF;
        }
        .name_status2{
          .w(122);
          .h(40);
          .lh(40);
          .fs(22);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color: #F83F43;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          .name_p3{
            background:rgba(254,237,232,0.85);
            width: 100%;
            height: 100%;
            box-shadow:0px 2px 14px 0px rgba(0,0,0,0.05);
            position: absolute;
            left: 0px;
            top: 0px;
            .b-radius(20);
          }
          img{
            position: relative;
            .w(28);
            .h(28);
          }
          span{
            position: relative;
          }
        }
        .name_p2{
          .w(104);
          .h(40);
          background:rgba(255,255,255,1);
          box-shadow:0px 2px 14px 0px rgba(0,0,0,0.05);
          .b-radius(22);
          position: absolute;
          left: 0px;
          top:0px;
          opacity:0.3;
        }
      }
      .hezuo{
        .w(130);
        .h(46);
        .lh(46);
        .btl-radius(12);
        .bbr-radius(12);
        .fs(24);
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        .border-solid(2, #FFF);
      }
    }
    .header_bottom{
      .h(36);
      .fs(26);
      .ml(46);
      .mt(30);
      .mr(46);
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(255,255,255,1);
      .lh(36);
      display: flex;
      justify-content: space-between;
      .header_bottom_left{
        .w(440);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
      }
      .header_bottom_right{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .qiehuan{
        .w(32);
        .h(30);
      }
    }
  }
  .card_box{
    position: relative;
    .h(298);
    width: 100%;
  }
  .card{
    .w(692);
    .minh(1010);
    background:rgba(255,255,255,1);
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.06);
    .b-radius(20);
    margin: 0 auto;
    .mt(-94);
    .card-content{
      .padding(30, 40);
      height: 100%;
      .title{
        font-size: 0px;
        display: flex;
        align-items: center;
        .h(44);
        .lh(44);
        .title_icon{
          display: block;
          .w(36);
          .h(36);
          .mr(12);
        }
        .title_h{
          // width:93px;
          .h(24);
          .fs(26);
          font-family:PingFangSC-Semibold,PingFang SC;
          font-weight:600;
          color:rgba(0,0,0,1);
          .lh(24);
        }
        .title_chankan{
          position: absolute;
          right: 0px;
          .w(122);
          .h(32);
          .fs(26);
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:500;
          color:#000;
          .lh(32);
          .title_chakan_icon{
            .w(18);
            .h(16);
            .ml(0);
            display: inline-block;
            background: url("../../assets/share/mingxi.png") no-repeat center;
            background-size: contain;
          }
        }
      }
      .error{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .error_img{
          .w(112);
          .h(112);
        }
        .error_title{
          .h(36);
          .fs(26);
          .mt(24);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ACACAC;
          line-height: 18px;
        }
      }
    }
  }
  .share_people{
    margin: 0 auto;
    .mt(46);
    width: 92.23%;
    .h(220);
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 15px 0px rgba(0,0,0,0.06);
    .b-radius(10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .people_left{
      .w(10);
      .h(220);
      .btl-radius(20);
      .bbl-radius(20);
      background:rgba(254,113,104,1);
    }
    .people_center{
      .ml(30);
      .mr(30);
      .w(402);
      .h(182);
      text-align: left;
      .people_center_top{
        .h(42);
        .fs(30);
        .mt(10);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(39,39,39,1);
        .lh(42);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .people_center_center{
        .h(34);
        .fs(24);
        .mt(10);
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(146,146,146,1);
        .lh(34);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .people_center_bottom{
        .mt(20);
        .w(172);
        .h(56);
        background:rgba(253,114,112,1);
        .b-radius(28);
        text-align: center;
        color: #FFF;
        .fs(32);
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        .lh(56);
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          .w(14);
          .h(22);
          .ml(14);
        }
      }
    }
    .people_right{
      .w(208);
      .h(182);
      .mr(26);
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .code{
    .w(660);
    .h(760);
    background:rgba(255,255,255,1);
    .b-radius(12);
    overflow: hidden;
    .img_box{
      .w(460);
      .h(460);
      background:rgba(249,249,249,1);
      .border-solid(4,#F0F0F0);
      margin: 0 auto;
      .mt(96);
      img{
        .w(336);
        .h(336);
        margin: 0 auto;
        .mt(62);
      }
    }
    p{
      .fs(32);
      .h(54);
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(70,70,70,1);
      .lh(54);
    }
    .code_p1{
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      .mt(34);
      .icon{
        .w(36);
        .h(36);
        display: inline-block;
        background: url('../../assets/share/zhiwen.png') no-repeat center;
        background-size: 100%;
      }
    }
  }
  .close{
    display: block;
    .w(64);
    .h(64);
    position: absolute;
    .bottom(-120);
    left: 50%;
    transform: translate(-50%);
    // background: #FFF;
    background: url("../../assets/share/close_radius.png") no-repeat center;
    background-size: 100%;
  }
  .address{
    position:absolute;
    bottom:0;
    left:0;
    z-index:2010;
    background:#fff;
    width:100%;
    .title{
      position: relative;
      .h(80);
      h4{
        display:inline-block;
        .fs(36);
        .lh(80);
        .h(80);
        font-weight:normal;
        color:#999;
      }
    }
  }
  .mulu_close{
    .w(36);
    .h(36);
    position: absolute;
    .right(30);
    .top(22);
    background: url("../../assets/share/close.png") no-repeat center;
    background-size: 100%;
  }
  .huodongbox{
    .pt(60);
    background: #FFF;
    .w(750);
    .h(320);
    overflow-y: auto;
  }
  .addList{
    width:100%;
    .fs(28);
    .lh(80);
    .h(80);
    color:#333;
  }
  /* 修改的格式 */
  .address ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width:100%;
    height:100%;
    .h(360);
    overflow:auto;
  }
  .address ul li{
  }
  .address .title .active{
    color:#0071B8;
    border-bottom:0.02rem solid #0071B8;
  }
  .address ul .active{
    color:#0071B8;
  }
  .listdata{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    .listitem{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .mt(60);
      .h(192);
      .listitem_img{
        .w(192);
        .h(192);
        background: #E9E9E9;
        .b-radius(20);
        .fs(0);
        .mr(20);
        border: none;
      }
      .listitem_content{
        .w(400);
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .h(192);
        .listitemtop{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
        .listitem_title{
          .h(44);
          .fs(32);
          flex: 1;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          .lh(44);
          .w(270);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis
        }
        .listitem_status{
          .fs(28);
          .h(40);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #464646;
          .lh(40);
          .mt(12);
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis
        }
        .listitem_time{
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ACACAC;
          .h(34);
          .lh(34);
          .fs(24);
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .mt(60);
        }
      }
      .listitem_price{
        .w(150);
        text-align: right;
        .h(44);
        .fs(32);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #F83F43;
        .lh(44);
      }
    }
  }
  .footer_title{
    .h(40);
    .lh(40);
    .fs(24);
    .mt(46);
    .mb(18);
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #929292;
    .footer_right{
      .w(12);
      .h(12);
      .b-top(4, #929292);
      display: inline-block;
      .border-right-solid(4, #929292);
      transform: rotate(45deg);
    }
  }
}
</style>
